import React, { Component } from 'react'
import TwsLayout from './components/tws-layout'
import { connect } from 'react-redux'
import { LocaleProvider } from 'antd'
import { IntlProvider } from 'react-intl'
import asyncComponent from './async-component'
import {
    HashRouter as Router,
    Route
} from 'react-router-dom'
import {getLangFromLocalStorage} from './constant/lang-util'
import locales from './locales'
const InstructorProgramListPageBody = asyncComponent(()=>import('./components/program-list/instructor-program-list-page-body'))
const InstructorProgramPageBody = asyncComponent(()=>import('./components/program/instructor-program-page-body'))
const InstructorSuggestionPageBody = asyncComponent(()=>import('./components/suggestion/instructor-suggestion-page-body'))
const InstructorTaskPageBody = asyncComponent(()=>import('./components/task/instructor-task-page-body'))
const AssignmentVideoBody = asyncComponent(()=>import('./components/assignment-video/assignment-video-body-page'))
const AssignmentQuizzes = asyncComponent(()=>import('./components/assignemnt/quizzes-page-body'))

class App extends Component {
  render () {
    const lang = this.props.lang || getLangFromLocalStorage()
    const langData = locales[lang]
    return (
      <IntlProvider locale={langData.intlLocale} messages={langData.intlMessage}>
        <LocaleProvider locale={langData.locale}>
          <Router>
            <TwsLayout lang={lang}>
              <Route exact path='/' component={InstructorProgramListPageBody} />
              <Route exact path='/program/:programId' component={InstructorProgramPageBody} />
              <Route exact path='/program/:programId/task/:taskId/suggestion'
                component={InstructorSuggestionPageBody} />
              <Route exact path='/program/:programId/task/:taskId' component={InstructorTaskPageBody} />
              <Route exact path='/program/:programId/task/:taskId/paper/sections'
                component={AssignmentVideoBody} />
              <Route exact path='/program/:programId/task/:taskId/assignment/:assignmentId'
                component={AssignmentQuizzes} />
              <Route exact path='/:param'
                component={InstructorProgramListPageBody} />
            </TwsLayout>
          </Router>
        </LocaleProvider>
      </IntlProvider>
    )
  }
}

const mapStateToProps = ({lang}) => ({lang})

export default connect(mapStateToProps)(App)
